<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>可以射击的3D直升机</title>
    <style>
      .cuboid {
        width: 100%;
        height: 100%;
        position: relative;
      }
      .cuboid__side:nth-of-type(1) {
        height: calc(var(--thickness) * 1vmin);
        width: 100%;
        position: absolute;
        top: 0;
        transform: translate(0, -50%) rotateX(90deg);
      }
      .cuboid__side:nth-of-type(2) {
        height: 100%;
        width: calc(var(--thickness) * 1vmin);
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(50%, -50%) rotateY(90deg);
      }
      .cuboid__side:nth-of-type(3) {
        width: 100%;
        height: calc(var(--thickness) * 1vmin);
        position: absolute;
        bottom: 0;
        transform: translate(0%, 50%) rotateX(90deg);
      }
      .cuboid__side:nth-of-type(4) {
        height: 100%;
        width: calc(var(--thickness) * 1vmin);
        position: absolute;
        left: 0;
        top: 50%;
        transform: translate(-50%, -50%) rotateY(90deg);
      }
      .cuboid__side:nth-of-type(5) {
        height: 100%;
        width: 100%;
        transform: translate3d(0, 0, calc(var(--thickness) * 0.5vmin));
        position: absolute;
        top: 0;
        left: 0;
      }
      .cuboid__side:nth-of-type(6) {
        height: 100%;
        width: 100%;
        transform: translate3d(0, 0, calc(var(--thickness) * -0.5vmin)) rotateY(
            180deg
          );
        position: absolute;
        top: 0;
        left: 0;
      }
      *,
      *:after,
      *:before {
        box-sizing: border-box;
        transform-style: preserve-3d;
        transition: background 0.25s;
      }
      :root {
        --base-size: 20;
        --helicopter-height: calc(var(--base-size) * 1vmin);
        --helicopter-width: calc(var(--helicopter-height) * 2);
        --helicopter-one: hsl(0, 0%, calc((60 + (var(--on, 0) * 35)) * 1%));
        --helicopter-two: hsl(0, 0%, calc((55 + (var(--on, 0) * 35)) * 1%));
        --helicopter-three: hsl(0, 0%, calc((50 + (var(--on, 0) * 35)) * 1%));
        --helicopter-four: hsl(0, 0%, calc((40 + (var(--on, 0) * 35)) * 1%));
        --chair-one: hsl(0, 0%, calc((20 + (var(--on, 0) * 15)) * 1%));
        --chair-two: hsl(0, 0%, calc((15 + (var(--on, 0) * 15)) * 1%));
        --chair-three: hsl(0, 0%, calc((10 + (var(--on, 0) * 15)) * 1%));
        --chair-four: hsl(0, 0%, calc((5 + (var(--on, 0) * 15)) * 1%));
        --dash-one: hsl(0, 0%, calc((50 + (var(--on, 0) * 15)) * 1%));
        --dash-two: hsl(0, 0%, calc((45 + (var(--on, 0) * 15)) * 1%));
        --dash-three: hsl(0, 0%, calc((40 + (var(--on, 0) * 15)) * 1%));
        --dash-four: hsl(0, 0%, calc((35 + (var(--on, 0) * 15)) * 1%));
        --accent-one: hsl(10, 60%, calc((30 + (var(--on, 0) * 35)) * 1%));
        --accent-two: hsl(10, 60%, calc((25 + (var(--on, 0) * 35)) * 1%));
        --accent-three: hsl(10, 60%, calc((20 + (var(--on, 0) * 35)) * 1%));
        --accent-four: hsl(10, 60%, calc((15 + (var(--on, 0) * 35)) * 1%));
        --rocket-one: hsl(1, 60%, calc((20 + (var(--on, 0) * 25)) * 1%));
        --rocket-two: hsl(1, 60%, calc((15 + (var(--on, 0) * 25)) * 1%));
        --rocket-three: hsl(1, 60%, calc((10 + (var(--on, 0) * 25)) * 1%));
        --rocket-four: hsl(1, 60%, calc((5 + (var(--on, 0) * 25)) * 1%));
        --screen-one: hsla(
          210,
          80%,
          calc((25 + (var(--on, 0) * 25)) * 1%),
          0.45
        );
        --screen-two: hsla(
          210,
          80%,
          calc((25 + (var(--on, 0) * 25)) * 1%),
          0.4
        );
        --screen-three: hsla(
          210,
          80%,
          calc((25 + (var(--on, 0) * 25)) * 1%),
          0.35
        );
        --screen-four: hsla(
          210,
          80%,
          calc((25 + (var(--on, 0) * 25)) * 1%),
          0.35
        );
        --bg: hsl(210, 80%, calc((15 + (var(--on, 0) * 75)) * 1%));
      }
      body {
        min-height: 100vh;
        display: grid;
        place-items: center;
        background: var(--bg);
        overflow: hidden;
        touch-action: none;
      }
      .scene {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 100vmin);
        transform: translate3d(-50%, -50%, 100vmin) rotateX(-24deg) rotateY(
            44deg
          ) rotateX(calc(var(--rotate-x, 0) * 1deg)) rotateY(calc(var(
                  --rotate-y,
                  0
                ) * 1deg));
      }
      .helicopter {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-20%, -50%);
      }
      .helicopter__wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-animation: float 1s infinite linear;
        animation: float 1s infinite linear;
        height: var(--helicopter-height);
        width: var(--helicopter-width);
      }
      @-webkit-keyframes float {
        50% {
          transform: translate(-50%, -65%);
        }
      }
      @keyframes float {
        50% {
          transform: translate(-50%, -65%);
        }
      }
      .helicopter__base-light {
        --hue: 20;
        bottom: -6%;
        width: 6%;
        height: 6%;
        left: 47%;
        position: absolute;
      }
      .helicopter__tail-light {
        --hue: 15;
        top: -20%;
        width: 20%;
        height: 20%;
        position: absolute;
        left: 65%;
      }
      .helicopter__wing-light {
        --hue: 90;
        --speed: 0.4;
        top: -50%;
        width: 10%;
        height: 50%;
        position: absolute;
        left: 45%;
      }
      .helicopter__wing-light--left {
        transform: translate3d(0, 0, calc(var(--base-size) * 0.5vmin));
      }
      .helicopter__wing-light--right {
        transform: translate3d(0, 0, calc(var(--base-size) * -0.5vmin));
      }
      .helicopter > * {
        position: absolute;
      }
      .helicopter__rotor {
        top: 0;
        left: 30%;
        height: 14%;
        width: 8%;
      }
      .helicopter__cockpit {
        left: 0;
        top: 14%;
        width: 54%;
        height: 70%;
      }
      .helicopter__tail {
        top: 30%;
        height: 20%;
        width: 46%;
        left: 54%;
      }
      .helicopter__fin {
        right: 2%;
        top: 10%;
        height: 20%;
        width: 10%;
      }
      .helicopter__stabilizer {
        right: 2%;
        top: 30%;
        height: 10%;
        width: 10%;
      }
      .helicopter__skids {
        bottom: 0;
        left: 0;
        height: 6%;
        width: 70%;
      }
      .helicopter__wing {
        height: 6%;
        width: 22%;
        left: 28%;
        top: 60%;
      }
      .helicopter__launchers {
        height: 10%;
        width: 18%;
        left: 30%;
        top: 66%;
      }
      .helicopter__chair {
        position: absolute;
        left: 18%;
        top: 30%;
        width: 28%;
        height: 58%;
      }
      .helicopter__chair-back {
        position: absolute;
        width: 25%;
        right: 0;
        top: 0;
        height: 100%;
      }
      .helicopter__chair-bottom {
        position: absolute;
        height: 20%;
        right: 0;
        bottom: 0;
        width: 80%;
      }
      .helicopter__launcher {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }
      .helicopter__launcher--left {
        transform: translate3d(0, 0, calc(var(--base-size) * -0.425vmin));
      }
      .helicopter__launcher--right {
        transform: translate3d(0, 0, calc(var(--base-size) * 0.425vmin));
      }
      .helicopter__triblade {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 50%;
        top: 50%;
        transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(
            1.25
          );
        border-radius: 50%;
        overflow: hidden;
        -webkit-animation: rotate-tri 0.2s infinite linear;
        animation: rotate-tri 0.2s infinite linear;
      }
      .helicopter__triblade:after,
      .helicopter__triblade:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100%;
        width: 15%;
        background: var(--chair-four);
        transform: translate(-50%, -50%);
      }
      .helicopter__triblade:after {
        transform: translate(-50%, -50%) rotate(90deg);
      }
      @-webkit-keyframes rotate-tri {
        to {
          transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(
              1.25
            )
            rotate(-360deg);
        }
      }
      @keyframes rotate-tri {
        to {
          transform: translate3d(-25%, -75%, calc(var(--base-size) * 0.07vmin)) scale(
              1.25
            )
            rotate(-360deg);
        }
      }
      .helicopter__blades {
        height: calc(var(--helicopter-height) * 2);
        width: calc(var(--helicopter-height) * 2);
        left: 34%;
        top: 0%;
        transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px);
        border-radius: 50%;
        overflow: hidden;
        -webkit-animation: blades infinite 0.1s linear;
        animation: blades infinite 0.1s linear;
      }
      .helicopter__blades:after,
      .helicopter__blades:before {
        content: '';
        height: 100%;
        width: 10%;
        background: linear-gradient(
          var(--chair-one) 0 5%,
          var(--accent-one) 5% 10%,
          var(--chair-one) 10% 90%,
          var(--accent-one) 90% 95%,
          var(--chair-one) 95% 100%
        );
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .helicopter__blades:after {
        transform: translate(-50%, -50%) rotate(90deg);
      }
      .helicopter__skid {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
      }
      .helicopter__skid:after,
      .helicopter__skid:before {
        content: '';
        position: absolute;
        left: 16%;
        width: 4%;
        bottom: 0;
        height: 400%;
        background: var(--chair-four);
        transform-origin: 50% 100%;
        transform: rotateX(calc(25 * var(--coefficient, 1deg)));
      }
      .helicopter__skid:before {
        left: 56%;
      }
      .helicopter__skid--left {
        transform: translate3d(0, 0, calc(var(--base-size) * 0.4vmin));
      }
      .helicopter__skid--right {
        --coefficient: -1deg;
        transform: translate3d(0, 0, calc(var(--base-size) * -0.4vmin));
      }
      .helicopter__dashboard {
        position: absolute;
        left: 2%;
        top: 50%;
        width: 16%;
        height: 38%;
      }
      @-webkit-keyframes shift {
        0%,
        10%,
        90%,
        100% {
          transform: translate(-20%, -50%) translate3d(0, 0, 0);
        }
        20%,
        50% {
          transform: translate(-20%, -50%) translate3d(0, 0, 10vmin);
        }
        60%,
        80% {
          transform: translate(-20%, -50%) translate3d(0, 0, -10vmin);
        }
      }
      @keyframes shift {
        0%,
        10%,
        90%,
        100% {
          transform: translate(-20%, -50%) translate3d(0, 0, 0);
        }
        20%,
        50% {
          transform: translate(-20%, -50%) translate3d(0, 0, 10vmin);
        }
        60%,
        80% {
          transform: translate(-20%, -50%) translate3d(0, 0, -10vmin);
        }
      }
      .cuboid--cockpit {
        --thickness: calc(var(--base-size) * 0.6);
      }
      .cuboid--cockpit div {
        background: var(--helicopter-four);
      }
      .cuboid--cockpit div:nth-of-type(1) {
        background: linear-gradient(
            90deg,
            var(--screen-one) 0 50%,
            var(--helicopter-one) 50% 100%
          ) 50% 50%/100% 100% no-repeat;
      }
      .cuboid--cockpit div:nth-of-type(2):after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        height: calc(100% - 1px);
        width: calc(100% - 1px);
        background: #914db3;
        transform: translate3d(
          -50%,
          -50%,
          calc(var(--helicopter-width) * -0.27)
        );
      }
      .cuboid--cockpit div:nth-of-type(4) {
        background: transparent;
        background: linear-gradient(
            var(--screen-two) 0% 80%,
            var(--helicopter-one) 80% 100%
          ) 50% 50%/100% 100% no-repeat;
      }
      .cuboid--cockpit div:nth-of-type(5) {
        background: transparent;
        background: linear-gradient(
              var(--helicopter-three),
              var(--helicopter-three)
            ) 100% 50%/50% 100% no-repeat, linear-gradient(
              var(--screen-three) 0% 80%,
              var(--helicopter-three) 80% 100%
            ) 0% 50%/50% 100% no-repeat;
      }
      .cuboid--cockpit div:nth-of-type(5):after {
        content: '';
        position: absolute;
        top: 50%;
        height: 50%;
        width: 25%;
        right: 15%;
        transform: translate3d(0%, -60%, 1px) scale(0.75);
        filter: saturate(0.5);
      }
      .cuboid--cockpit div:nth-of-type(6) {
        background: transparent;
        background: linear-gradient(
              var(--helicopter-two),
              var(--helicopter-two)
            ) 0 50%/50% 100% no-repeat, linear-gradient(
              var(--screen-four) 0% 80%,
              var(--helicopter-two) 80% 100%
            ) 100% 50%/50% 100% no-repeat;
      }
      .cuboid--cockpit div:nth-of-type(6):after {
        content: '';
        position: absolute;
        top: 50%;
        height: 50%;
        width: 25%;
        left: 15%;
        transform: translate3d(0%, -60%, 1px) scale(0.75);
        filter: saturate(0.5);
      }
      .cuboid--tail {
        --thickness: calc(var(--base-size) * 0.4);
        --clip: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
      }
      .cuboid--tail div {
        background: var(--accent-four);
      }
      .cuboid--tail div:nth-of-type(1) {
        background: var(--accent-one);
        -webkit-clip-path: var(--clip);
        clip-path: var(--clip);
      }
      .cuboid--tail div:nth-of-type(2) {
        background: var(--accent-one);
        background: linear-gradient(
          90deg,
          transparent 0 40%,
          var(--accent-four) 40% 60%,
          transparent 60% 100%
        );
      }
      .cuboid--tail div:nth-of-type(3) {
        background: var(--accent-two);
        -webkit-clip-path: var(--clip);
        clip-path: var(--clip);
      }
      .cuboid--tail div:nth-of-type(4) {
        background: var(--accent-three);
      }
      .cuboid--tail div:nth-of-type(5) {
        background: transparent;
      }
      .cuboid--tail div:nth-of-type(5):after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: var(--accent-three);
        transform-origin: 0 50%;
        transform: rotateY(10deg);
      }
      .cuboid--tail div:nth-of-type(6) {
        background: transparent;
      }
      .cuboid--tail div:nth-of-type(6):after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: var(--accent-three);
        transform-origin: 100% 50%;
        transform: rotateY(-10deg);
      }
      .cuboid--stabilizer {
        --thickness: calc(var(--base-size) * 0.4);
      }
      .cuboid--stabilizer div {
        background: var(--helicopter-four);
      }
      .cuboid--stabilizer div:nth-of-type(1) {
        background: var(--helicopter-one);
      }
      .cuboid--stabilizer div:nth-of-type(3) {
        background: var(--helicopter-two);
      }
      .cuboid--stabilizer div:nth-of-type(4) {
        background: var(--helicopter-three);
      }
      .cuboid--fin {
        --thickness: calc(var(--base-size) * 0.1);
      }
      .cuboid--fin div {
        background: var(--helicopter-four);
      }
      .cuboid--fin div:nth-of-type(1) {
        background: linear-gradient(
          90deg,
          transparent 0 50%,
          var(--helicopter-one) 50% 100%
        );
      }
      .cuboid--fin div:nth-of-type(3) {
        background: var(--helicopter-two);
      }
      .cuboid--fin div:nth-of-type(4) {
        background: transparent;
      }
      .cuboid--fin div:nth-of-type(4):after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        background: var(--helicopter-two);
        height: 110%;
        width: 100%;
        transform-origin: 50% 100%;
        transform: rotateX(-24deg);
      }
      .cuboid--fin div:nth-of-type(5) {
        background: var(--helicopter-three);
        --clip: polygon(0 100%, 50% 0, 100% 0, 100% 100%);
        -webkit-clip-path: var(--clip);
        clip-path: var(--clip);
      }
      .cuboid--fin div:nth-of-type(6) {
        background: var(--helicopter-three);
        --clip: polygon(0 0%, 50% 0, 100% 100%, 0 100%);
        -webkit-clip-path: var(--clip);
        clip-path: var(--clip);
      }
      .cuboid--skid {
        --thickness: calc(var(--base-size) * 0.06);
      }
      .cuboid--skid div {
        background: var(--chair-four);
      }
      .cuboid--skid div:nth-of-type(1) {
        background: var(--chair-one);
      }
      .cuboid--skid div:nth-of-type(3) {
        background: var(--chair-two);
      }
      .cuboid--skid div:nth-of-type(4) {
        background: var(--chair-three);
      }
      .cuboid--dashboard {
        --thickness: calc(var(--base-size) * 0.52);
      }
      .cuboid--dashboard div {
        background: var(--dash-four);
      }
      .cuboid--dashboard div:nth-of-type(1) {
        background: var(--dash-one);
      }
      .cuboid--dashboard div:nth-of-type(3) {
        background: var(--dash-two);
      }
      .cuboid--dashboard div:nth-of-type(4) {
        background: var(--dash-three);
      }
      .cuboid--chair {
        --thickness: calc(var(--base-size) * 0.4);
      }
      .cuboid--chair div {
        background: var(--chair-four);
      }
      .cuboid--chair div:nth-of-type(1) {
        background: var(--chair-one);
      }
      .cuboid--chair div:nth-of-type(3) {
        background: var(--chair-two);
      }
      .cuboid--chair div:nth-of-type(4) {
        background: var(--chair-three);
      }
      .cuboid--wing {
        --thickness: calc(var(--base-size) * 1.1);
      }
      .cuboid--wing div {
        background: var(--accent-four);
      }
      .cuboid--wing div:nth-of-type(1) {
        background: var(--accent-one);
      }
      .cuboid--wing div:nth-of-type(3) {
        background: var(--accent-two);
      }
      .cuboid--wing div:nth-of-type(4) {
        background: var(--accent-three);
      }
      .cuboid--rotor {
        --thickness: calc(var(--base-size) * 0.14);
      }
      .cuboid--rotor div {
        background: var(--dash-four);
      }
      .cuboid--rotor div:nth-of-type(1) {
        background: var(--dash-one);
      }
      .cuboid--rotor div:nth-of-type(3) {
        background: var(--dash-two);
      }
      .cuboid--rotor div:nth-of-type(4) {
        background: var(--dash-three);
      }
      .cuboid--launcher {
        --thickness: calc(var(--base-size) * 0.08);
      }
      .cuboid--launcher div {
        background: var(--rocket-four);
      }
      .cuboid--launcher div:nth-of-type(1) {
        background: var(--rocket-one);
      }
      .cuboid--launcher div:nth-of-type(3) {
        background: var(--rocket-two);
      }
      .cuboid--launcher div:nth-of-type(4) {
        background: var(--rocket-three);
      }
      .cuboid--light {
        --thickness: calc(var(--base-size) * 0.035);
        -webkit-animation: flash calc(
            (1 - var(--on, 0)) * (var(--speed, 1) * 1s)
          ) infinite;
        animation: flash calc((1 - var(--on, 0)) * (var(--speed, 1) * 1s)) infinite;
      }
      .cuboid--light div {
        background: hsla(var(--hue, 10), 90%, 50%, var(--alpha, 0));
      }
      .helicopter__ammo {
        height: 50%;
        width: 30%;
        position: absolute;
        top: 50%;
        left: 0;
        transform: translate(0, -50%);
      }
      .cuboid--ammo {
        --thickness: calc(var(--base-size) * 0.05);
      }
      .cuboid--ammo div {
        background: hsl(var(--hue), 80%, 80%);
      }
      button {
        height: 48px;
        width: 48px;
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        cursor: pointer;
        transform: translate3d(0, 0, 150vmin);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 0;
        background: transparent;
        outline: transparent;
      }
      button > svg {
        position: absolute;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
      }
      button path {
        fill: hsl(210, 80%, calc((90 - (var(--on, 0) * 75)) * 1%));
      }
      button svg:nth-of-type(1),
      button span:nth-of-type(1) {
        display: none;
      }
      button span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border-width: 0;
      }
      [aria-pressed='true'] svg:nth-of-type(1),
      [aria-pressed='true'] span:nth-of-type(1) {
        display: block;
      }
      [aria-pressed='true'] svg:nth-of-type(2),
      [aria-pressed='true'] span:nth-of-type(2) {
        display: none;
      }
      @-webkit-keyframes blades {
        to {
          transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px)
            rotate(-360deg);
        }
      }
      @keyframes blades {
        to {
          transform: translate(-50%, -50%) rotateX(90deg) translate3d(0, 0, 1px)
            rotate(-360deg);
        }
      }
      @-webkit-keyframes flash {
        50% {
          --alpha: 1;
        }
      }
      @keyframes flash {
        50% {
          --alpha: 1;
        }
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="helicopter__tilter">
        <div class="helicopter__wrapper">
          <div class="helicopter">
            <div class="helicopter__rotor">
              <div class="cuboid cuboid--rotor">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
            </div>
            <div class="helicopter__cockpit">
              <div class="cuboid cuboid--cockpit">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
              <div class="helicopter__base-light">
                <div class="cuboid cuboid--base-light cuboid--light">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
              <div class="helicopter__chair">
                <div class="helicopter__chair-back">
                  <div class="cuboid cuboid--chair">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
                <div class="helicopter__chair-bottom">
                  <div class="cuboid cuboid--chair">
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                    <div class="cuboid__side"></div>
                  </div>
                </div>
              </div>
              <div class="helicopter__dashboard">
                <div class="cuboid cuboid--dashboard">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
            </div>
            <div class="helicopter__tail">
              <div class="cuboid cuboid--tail">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
            </div>
            <div class="helicopter__fin">
              <div class="cuboid cuboid--fin">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
              <div class="helicopter__triblade"></div>
              <div class="helicopter__tail-light">
                <div class="cuboid cuboid--tail-light cuboid--light">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
            </div>
            <div class="helicopter__stabilizer">
              <div class="cuboid cuboid--stabilizer">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
            </div>
            <div class="helicopter__skids">
              <div class="helicopter__skid--left helicopter__skid">
                <div class="cuboid cuboid--skid">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
              <div class="helicopter__skid--right helicopter__skid">
                <div class="cuboid cuboid--skid">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
            </div>
            <div class="helicopter__wing">
              <div class="cuboid cuboid--wing">
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
                <div class="cuboid__side"></div>
              </div>
              <div class="helicopter__wing-light helicopter__wing-light--left">
                <div class="cuboid cuboid--wing-light cuboid--light">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
              <div class="helicopter__wing-light helicopter__wing-light--right">
                <div class="cuboid cuboid--wing-light cuboid--light">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
            </div>
            <div class="helicopter__launchers">
              <div class="helicopter__launcher helicopter__launcher--left">
                <div class="cuboid cuboid--launcher">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
              <div class="helicopter__launcher helicopter__launcher--right">
                <div class="cuboid cuboid--launcher">
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                  <div class="cuboid__side"></div>
                </div>
              </div>
            </div>
            <div class="helicopter__blades"></div>
          </div>
        </div>
      </div>
    </div>
    <button title="Toggle theme">
      <span>Turn Lights Off</span><span>Turn Lights On</span>
      <svg viewBox="0 0 512 512" width="100" title="moon">
        <path
          d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"
        ></path>
      </svg>
      <svg viewBox="0 0 512 512" width="100" title="sun">
        <path
          d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"
        ></path>
      </svg>
    </button>

    <script type="module">
      import gsap from 'https://cdn.skypack.dev/gsap@3.11.0';
      let FIRING = false;
      const BOUNDS = 50;
      document.addEventListener('pointermove', ({ x, y }) => {
        const newX = gsap.utils.mapRange(
          0,
          window.innerWidth,
          -BOUNDS,
          BOUNDS,
          x
        );
        const newY = gsap.utils.mapRange(
          0,
          window.innerHeight,
          BOUNDS,
          -BOUNDS,
          y
        );
        gsap.set(document.documentElement, {
          '--rotate-x': newY,
          '--rotate-y': newX,
        });
      });
      const LEFT_LAUNCHER = document.querySelector(
        '.helicopter__launcher--left'
      );
      const RIGHT_LAUNCHER = document.querySelector(
        '.helicopter__launcher--right'
      );

      gsap.ticker.add((time, deltaTime, frame) => {
        if (FIRING) {
          const AMMO = document.createElement('div');
          AMMO.innerHTML = `
      <div class="cuboid cuboid--ammo">
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
        <div class="cuboid__side"></div>
      </div>
    `;
          AMMO.className = 'helicopter__ammo';
          AMMO.style.setProperty('--hue', Math.random() * 360);
          if (frame % 2 === 0) LEFT_LAUNCHER.appendChild(AMMO);
          else RIGHT_LAUNCHER.appendChild(AMMO);

          gsap.to(AMMO, {
            xPercent: () => gsap.utils.random(-3000, -2000),
            // duration: 0.2,
            onComplete: () => AMMO.remove(),
          });
        }
      });

      gsap.ticker.fps(24);

      document.addEventListener('pointerdown', () => {
        FIRING = true;
      });
      document.addEventListener('pointerup', () => {
        FIRING = false;
      });

      // Purely for debugging purposes
      // import { GUI } from 'https://cdn.skypack.dev/dat.gui'

      // const CONTROLLER = new GUI()
      // const CONFIG = {
      //   'rotate-x': -360,
      //   'rotate-y': -360,
      // }
      // const UPDATE = () => {
      //   Object.entries(CONFIG).forEach(([key, value]) => {
      //     document.documentElement.style.setProperty(`--${key}`, value)
      //   })
      // }
      // const PLANE_FOLDER = CONTROLLER.addFolder('Plane')
      // PLANE_FOLDER.add(CONFIG, 'rotate-x', -360, 360, 1)
      //   .name('Rotate X (deg)')
      //   .onChange(UPDATE)
      // PLANE_FOLDER.add(CONFIG, 'rotate-y', -360, 360, 1)
      //   .name('Rotate Y (deg)')
      //   .onChange(UPDATE)
      // UPDATE()

      // Dark Mode
      const THEMES = (window.THEMES = {
        LIGHT: 'LIGHT',
        DARK: 'DARK',
        KEY: 'THEME',
      });

      window.LIGHT_QUERY = window.matchMedia('(prefers-color-scheme: light)'); // Mode enums

      window.__setTheme = (theme) => {
        window.__THEME = theme;
        window.localStorage.setItem(THEMES.KEY, theme);
      }; // Need to check the box based on different criteria.
      // Check if mode is Light and preference is dark or no preference.

      const stored = localStorage.getItem(THEMES.KEY);

      if (stored) {
        window.__THEME = stored;
        window.__setTheme(stored);
      } else {
        if (window.LIGHT_QUERY.matches) {
          window.__THEME = THEMES.LIGHT;
        } else {
          window.__THEME = THEMES.DARK;
        }

        window.__setTheme(window.__THEME);
      }

      window.INITIAL_THEME =
        (window.__THEME && window.__THEME === THEMES.LIGHT) ||
        (window.localStorage.getItem(THEMES.KEY) &&
          window.localStorage.getItem(THEMES.KEY) === THEMES.LIGHT);

      const BUTTON = document.querySelector('button');

      gsap.set(BUTTON, {
        attr: {
          'aria-pressed': window.__THEME === THEMES.DARK ? 'false' : 'true',
        },
      });

      gsap.set('html', {
        '--on': window.__THEME === THEMES.DARK ? 0 : 1,
      });

      BUTTON.addEventListener('click', () => {
        const NEW_THEME =
          window.__THEME === THEMES.DARK ? THEMES.LIGHT : THEMES.DARK;
        window.__setTheme(NEW_THEME);
        gsap.set('button', {
          attr: {
            'aria-pressed': NEW_THEME === THEMES.DARK ? 'false' : 'true',
          },
        });

        gsap.set('html', {
          '--on': window.__THEME === THEMES.DARK ? 0 : 1,
        });
      });
    </script>
  </body>
</html>
